<template>
  <div>
    <ReturnPage class="mb20" />
    <el-card>
      <div slot="header" class="clearfix">
        <span>合规审计</span>
      </div>
      <el-table height="calc(100vh - 290px)" :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="id">
        </el-table-column>
        <el-table-column prop="complianceIp" label="被发现的IP" align="center">
        </el-table-column>
        <el-table-column prop="complianceSource" label="来源" align="center">
          <template slot-scope="{ row: { complianceSource } }">
            <el-tag v-if="+complianceSource === 1">手动纳管</el-tag>
            <el-tag type="success" v-else-if="+complianceSource === 2">自动发现</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="complianceState" label="状态" align="center">
          <template slot-scope="{ row: { complianceState } }">
            <el-tag v-if="+complianceState === 1">合规</el-tag>
            <el-tag type="danger" v-else-if="+complianceState === 2">不合规</el-tag>
            <el-tag type="warning" v-else-if="+complianceState === 3">未处理</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.complianceState == 3" type="primary" size="mini"
              @click="complianceAudit(scope.row.id, scope.row.complianceSource, 1)">合规</el-button>
            <el-button v-if="scope.row.complianceState == 3" type="danger" size="mini"
              @click="complianceAudit(scope.row.id, scope.row.complianceSource, 2)">不合规</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="query.pageNum" :limit.sync="query.pageSize"
        @pagination="getList()" />
    </el-card>

  </div>
</template>

<script>
import { auditList, complianceAudit } from "@/api/monitor/operlog";
export default {
  data() {
    return {
      total: 10,
      query: {
        pageNum: 1, //页码
        pageSize: 10, //页数

      },
      tableData: []
    }
  },
  created() {
    this.getList();
  },
  methods: {
    //列表数据
    async getList() {
      let res = await auditList(this.query)
      let { code, rows, total } = res
      if (code == 200) {
        this.tableData = rows
        this.total = total
      }
    },
    //合规不合规
    async complianceAudit(id, complianceSource, state) {
      let res = await complianceAudit({
        id: id,
        complianceOperate: state,
        complianceSource: complianceSource,
        complianceState: state
      })
      let { code, msg } = res
      if (code == 200) {
        this.$message.success(msg)
        this.getList()
      }
      else {
        this.$message.error(msg)
      }
    }
  },
}
</script>

<style lang="scss" scoped></style>